<template>
  <component :is="renderLoop(column)"></component>
</template>

<script lang="tsx" setup>
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import _ from 'lodash'
export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, "children" | "renderHeader" | "renderCell">> {
	isShow?: boolean; 
	render?: (scope: { row: T }) => any; 
	_children?: ColumnProps<T>[]; 
}


defineProps<{ column: ColumnProps }>();

const slots = useSlots();

const renderLoop = (item: ColumnProps) => {
  // ref 在template里面会自动解包(.value), tsx里面不会
  // 不支持 v-if 建议使用 三元替代。如：
  // const name = ref(true)
  // <div>{ name.value ? '张三' : '李四'}</div>

  // v-bind 用 {}代替
  // map 替代 v-for。 如：
  // {[1, 2, 3, ].map(item => <div id={item}>{item}</div>)}

  // 插槽 v-slots
   const A = (_:any, {slots}: any) => (<>
     <div>{slots.default ? slots.default() : 'hi'}</div>
     <div>{slots.header?.()}</div>
   </>)
   const slot = {
    // 插槽名字: () => 渲染内容
    default: () => (<div>这里是默认插槽</div>),
    header: () => (<div>这里是头部插槽</div>)
   }
  // v-model 可以正常使用
	return (
		<>
			{
				<el-table-column
					{...item}
					align={item.align ?? "center"}
					showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
				>
					{{
						default: (scope: any) => {
							if (item._children) return item._children.map(child => renderLoop(child));
							if (item.render) {
                return item.render(scope)
              };
							if (slots[item.prop!]) return slots[item.prop!]!(scope);
						}
					}}
          {/* <A v-slots={slot}></A> */}
          {/* 或 */}
          {/* <A>{slot}</A> */}
				</el-table-column>
			}
      
		</>
	);
};
</script>
